<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心 - 连连看游戏系统</title>
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .home-container {
            max-width: 1400px;
            margin: 80px auto 40px;
            padding: 0 20px;
        }

        .user-header {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            justify-content: space-between;
            backdrop-filter: blur(10px);
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 30px;
            flex: 1;
        }
        
        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid #667eea;
            object-fit: cover;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .user-info h2 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
            font-size: 28px;
        }

        .user-account {
            color: #888;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .user-stats {
            display: flex;
            gap: 20px;
            margin-top: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 8px 15px;
            background: rgba(102, 126, 234, 0.08);
            border-radius: 10px;
        }
        
        .stat-value {
            font-size: 22px;
            font-weight: bold;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .stat-label {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }

        .quick-actions {
            display: flex;
            gap: 15px;
        }

        .btn-action {
            padding: 12px 25px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: white;
            color: #667eea;
            border: 2px solid #667eea;
        }

        .btn-secondary:hover {
            background: #667eea;
            color: white;
        }

        .section-title {
            color: white;
            font-size: 22px;
            font-weight: 600;
            margin: 30px 0 20px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-title::before {
            content: '';
            width: 4px;
            height: 24px;
            background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.5) 100%);
            border-radius: 2px;
        }
        
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .menu-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
            border-radius: 15px;
            padding: 35px 25px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .menu-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .menu-card:hover::before {
            transform: scaleX(1);
        }
        
        .menu-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.25);
            border-color: #667eea;
        }

        .menu-card.disabled {
            cursor: not-allowed;
            opacity: 0.7;
        }

        .menu-card.disabled:hover {
            transform: translateY(0);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            border-color: transparent;
        }
        
        .menu-icon {
            font-size: 56px;
            margin-bottom: 15px;
            filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.2));
        }
        
        .menu-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .menu-desc {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }

        .coming-soon {
            display: inline-block;
            margin-top: 8px;
            padding: 4px 10px;
            background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
            color: white;
            font-size: 12px;
            border-radius: 12px;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">🎮 LinkUp 连连看</div>
            <div class="nav-menu">
                <a href="#" class="active">首页</a>
                <a th:href="@{/user/rank}">排行榜</a>
                <a th:href="@{/user/shop}">道具商店</a>
                <a href="#" onclick="logout()">退出</a>
            </div>
        </div>
    </nav>

    <div class="home-container">
        <!-- 用户信息卡片 -->
        <div class="user-header">
            <div class="user-profile">
                <img th:src="${user.avatar}" alt="头像" class="user-avatar">
                <div class="user-info">
                    <h2 th:text="${user.nickname}">用户昵称</h2>
                    <p class="user-account">账号：<span th:text="${user.account}"></span></p>
                    <div class="user-stats">
                        <div class="stat-item">
                            <div class="stat-value" th:text="${user.totalScore}">0</div>
                            <div class="stat-label">总积分</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value" th:text="${user.gameCount}">0</div>
                            <div class="stat-label">游戏场次</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value" th:text="${user.winCount}">0</div>
                            <div class="stat-label">胜场</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value" th:text="${user.maxCombo}">0</div>
                            <div class="stat-label">最大连击</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="quick-actions">
                <a th:href="@{/user/game/select}" class="btn-action btn-primary">🎮 开始游戏</a>
                <a th:href="@{/user/logout}" class="btn-action btn-secondary">退出登录</a>
            </div>
        </div>

        <!-- 游戏功能 -->
        <div class="section-title">🎮 游戏功能</div>
        <div class="menu-grid">
            <a th:href="@{/user/game/select}" style="text-decoration: none; color: inherit;">
                <div class="menu-card">
                    <div class="menu-icon">🎯</div>
                    <div class="menu-title">单机模式</div>
                    <div class="menu-desc">挑战自我，刷新记录</div>
                </div>
            </a>
            <div class="menu-card disabled" onclick="showComingSoon('好友对战')">
                <div class="menu-icon">⚔️</div>
                <div class="menu-title">好友对战</div>
                <div class="menu-desc">邀请好友，一决高下</div>
                <span class="coming-soon">敬请期待</span>
            </div>
        </div>

        <!-- 数据与排行 -->
        <div class="section-title">📊 数据与排行</div>
        <div class="menu-grid">
            <a th:href="@{/user/rank}" style="text-decoration: none; color: inherit;">
                <div class="menu-card">
                    <div class="menu-icon">🏆</div>
                    <div class="menu-title">积分排行榜</div>
                    <div class="menu-desc">查看排名，冲击榜首</div>
                </div>
            </a>
            <a th:href="@{/user/stats}" style="text-decoration: none; color: inherit;">
                <div class="menu-card">
                    <div class="menu-icon">📊</div>
                    <div class="menu-title">个人数据</div>
                    <div class="menu-desc">查看详细游戏统计</div>
                </div>
            </a>
            <div class="menu-card disabled" onclick="showComingSoon('游戏记录')">
                <div class="menu-icon">📝</div>
                <div class="menu-title">游戏记录</div>
                <div class="menu-desc">查看历史对战记录</div>
                <span class="coming-soon">敬请期待</span>
            </div>
        </div>

        <!-- 商店与道具 -->
        <div class="section-title">🛒 商店与道具</div>
        <div class="menu-grid">
            <a th:href="@{/user/shop}" style="text-decoration: none; color: inherit;">
                <div class="menu-card">
                    <div class="menu-icon">🏪</div>
                    <div class="menu-title">道具商店</div>
                    <div class="menu-desc">购买道具，增强实力</div>
                </div>
            </a>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 LinkUp 连连看. All rights reserved.</p>
            <p>享受游戏，挑战自我！</p>
        </div>
    </footer>

    <script>
        function showComingSoon(featureName) {
            // 创建优雅的提示框
            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.6);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 9999;
                animation: fadeIn 0.3s ease;
            `;
            
            const content = document.createElement('div');
            content.style.cssText = `
                background: white;
                border-radius: 20px;
                padding: 40px;
                max-width: 400px;
                text-align: center;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                animation: slideIn 0.3s ease;
            `;
            
            content.innerHTML = `
                <div style="font-size: 64px; margin-bottom: 20px;">🚧</div>
                <h3 style="font-size: 24px; color: #667eea; margin-bottom: 15px;">${featureName || '功能'}开发中</h3>
                <p style="color: #666; margin-bottom: 25px; line-height: 1.6;">
                    我们正在努力开发这个功能，<br>敬请期待！
                </p>
                <button onclick="this.closest('[style*=fixed]').remove()" 
                    style="
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: white;
                        border: none;
                        padding: 12px 32px;
                        border-radius: 10px;
                        font-size: 16px;
                        font-weight: 600;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    "
                    onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(102,126,234,0.4)'"
                    onmouseout="this.style.transform=''; this.style.boxShadow=''">
                    我知道了
                </button>
            `;
            
            modal.appendChild(content);
            document.body.appendChild(modal);
            
            // 点击背景关闭
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.remove();
                }
            });
            
            // 添加动画样式
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                @keyframes slideIn {
                    from { transform: translateY(-50px); opacity: 0; }
                    to { transform: translateY(0); opacity: 1; }
                }
            `;
            document.head.appendChild(style);
        }

        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = '/user/logout';
            }
        }
    </script>
</body>
</html>
